<template>
    <div>
        <Card dis-hover :style="{minHeight: height+'px'}">
            <div class="title" slot="title">
                <div>
                    <Icon :type="icon" class="icon"/>
                    {{title}}
                </div>
            </div>
            <div v-for="item in list" class="button-list">
                <div class="button-item">
                    <div>
                        <Icon v-if="item.type" :type="item.type" class="icon-f"/>
                    </div>
                    <div><a :href="item.url" target="_blank">{{item.title}}</a></div>
                    <!--<div><a :href="item.url" download="a.txt">{{item.title}}</a></div>-->
                    <div>
                        <Icon type="md-fastforward" class="icon"/>
                    </div>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
    export default {
        name: "fast-button",
        props: {
            height: {
                type: Number,
                default: 300
            },
            title: {
                type: String,
                default: "标题"
            },
            list: {
                type: Array,
                default: []
            },
            icon: {
                type: String,
                default: "md-arrow-dropdown-circle"
            }
        }
    }
</script>

<style scoped>
    /deep/ .ivu-card-head {
        background: url('../assets/img/03.jpg') repeat;
    }

    .icon {
        font-size: 18px;
        color: #fff;
    }

    .title {
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        color: #fff;
    }

    .button-list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }

    .button-item {
        width: 90%;
        height: 50px;
        background: url("../assets/img/04.jpg");
        text-align: center;
        line-height: 50px;
        font-size: 18px;
        margin: 5px 0;
        display: flex;
        justify-content: space-between;
        padding: 0 15px 0 20px;
        overflow: hidden;
    }

    .button-item .icon {
        margin-left: 10px;
        font-size: 18px;
        color: #808695;
    }

    .button-item .icon-f {
        font-size: 32px;
        color: #003e96;
        margin-top: 8px;
        margin-right: 5px;
    }

    a {
        color: #003e96;
    }
</style>